<template>
	<view class="wapx">
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">我的课时</text>
			</view>
		</view>
		
		<view class="keshixinxi">
			<view class="tiao"></view>
			<text class="xinxi">课时信息</text>
		</view>
		
		<view class="period-xinxicontent">
		      <view class="period-xinxicontent-top">
		        <text class="period-zi">课程</text>
		        <text>基础钢琴课</text>
		      </view>
		      <view class="period-xinxicontent-bottom">本月已完成课时：48课时</view>
			  <view class="didian">
			  	地点 | 舜泽琴行
			  </view>
			  
		</view>
		
		<calendar 
		:lunar="false"
        :disable-before="true"
        :start-date="'2019-3-2'"
        :end-date="'2030-5-20'"
        @change="change"
        @to-click="toClick"
		>
		<view class="tiao"></view>
		</calendar>
		
		
	</view>
</template>

<script>
	import calendar from '@/components/zzx-calendar/zzx-calendar.vue';
	export default {
		
		data() {
			return {
				
			}
		},
		methods: {
			    //to-click 事件和 change 事件，返回的数据都是一样的，所以两个事件只会一个生效。
			    //不同的地方在于，to-click 只有点击生效，而 change 是只要日期有变化就生效，这个变化不一定是点击。
			    //日历切换事件
			    change(e) {            
			        console.log(e);
			    },
			    //日历选择事件
			    toClick(e) {            
			        console.log(e);
			    },
				fanhui(){
					this.$router.push('/index')
				},
				
				
			  },
			
		components:{
		    calendar,
		},
	}
</script>

<style scoped>
	.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	.keshixinxi{
		width: 690rpx;
		height: 32rpx;
		margin: auto;
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.tiao{
		width: 5rpx;
		height: 19rpx;
		border-radius: 2.5rpx;
		background:#8DCE2A;
	}
	.xinxi{
		font-size: 32rpx;
		color: #333333;
		line-height:32rpx;
		margin-left:16rpx;
	}
	
	.period-xinxicontent{
		width: 690rpx;
		height: 200rpx;
		margin: auto;
		margin-top: 40rpx;
		border-radius: 10rpx;
		box-shadow:0vw 0vw 5.3333vw 0vw rgba(0, 0, 0, 0.16);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 37rpx;
	}
	.period-xinxicontent-top,
	.period-xinxicontent-bottom,.didian{
		width: 100%;
		height: 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		font-weight: bold;
	}
	.period-zi{
		width: auto;
		height: 30rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		background: #8DCE2A;
		border-radius:6rpx;
		font-weight: normal;
		color: #FFFFFF;
	}
	.period-xinxicontent-top > text:last-child {
	  margin-left: 16rpx;
	  font-weight: bold;
	}
	.didian{
		font-size:24rpx;
		color: #777777;
	}
	
	/deep/ .zzx-calendar .calendar-heander{
		text-align: left;
		box-sizing: border-box;
		padding-left:30rpx;
	}
	
	
</style>
